<template>
    <div class="detail eva-table">
        <el-row align="middle" justify="end" class="viewAssessment">
            <el-button v-if="tableData.length && isEdit" type="primary" @click="saveAssessmentResults">保存</el-button>
            <el-button v-if="tableData.length" plain @click="getAssessmentResults">查看详细评估结果</el-button>
            <el-button v-if="tableData.length" type="primary" @click="handleExportResults">导出</el-button>
        </el-row>
        <el-table :data="tableData" :border="true" stripe height="400" ref="tableRef">
            <el-table-column label="设定地震序号" prop="sort" align="center" width="80" fixed />
            <el-table-column label="经度" align="center" prop="longitude" fixed  min-width="100" />
            <el-table-column label="纬度" align="center" prop="latitude" fixed  min-width="100" />
            <el-table-column label="宏观位置" align="center" prop="macroPosition" width="160" fixed />
            <el-table-column label="震级" align="center" prop="magnitude" fixed />
            <el-table-column label="" align="center" prop="disasterArea" min-width="120">
                <template #header>
                    <span>受灾区域面积</span><br>
                    <span>（平方公里）</span>
                </template>
            </el-table-column>
            <el-table-column label="" align="center" prop="disasterNum" min-width="120">
                <template #header>
                    <span>灾区总人口</span><br>
                    <span>（万人）</span>
                </template>
            </el-table-column>
            <el-table-column label="" align="center" prop="disasterGdp" min-width="130">
                <template #header>
                    <span>灾区范围内GDP</span><br>
                    <span>（亿）</span>
                </template>
            </el-table-column>
            <el-table-column label="死亡人数（人）" align="center">
                <el-table-column label="修正前" align="center" prop="deathTollBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.deathTollAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.deathTollAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="受伤人数（人）" align="center">
                <el-table-column label="修正前" align="center" prop="injuredNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.injuredNumAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.injuredNumAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="灾区经济损失（亿元）" align="center">
                <el-table-column label="修正前" align="center" prop="disasterLossBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.disasterLossAfter1" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.disasterLossAfter2" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需紧急安置人数（人）" align="center">
                <el-table-column label="修正前" align="center" prop="resettledNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.resettledNumAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.resettledNumAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需紧急救援力量（人）" align="center">
                <el-table-column label="修正前" align="center" prop="rescueForceBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.rescueForceAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.rescueForceAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="其中专业救援力量（人）" align="center">
                <el-table-column label="修正前" align="center" prop="rescueForceZyBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.rescueForceZyAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.rescueForceZyAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="其中民间救援力量（人）" align="center">
                <el-table-column label="修正前" align="center" prop="rescueForceMjBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.rescueForceMjAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.rescueForceMjAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="其中社会其他救援力量（人）" align="center">
                <el-table-column label="修正前" align="center" prop="rescueForceQtBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.rescueForceQtAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.rescueForceQtAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需帐篷数（顶）" align="center">
                <el-table-column label="修正前" align="center" prop="tentNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.tentNumAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.tentNumAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需担架（付）" align="center">
                <el-table-column label="修正前" align="center" prop="stretcherNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.stretcherNumAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.stretcherNumAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需棉被（床）" align="center">
                <el-table-column label="修正前" align="center" prop="quiltsNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.quiltsNumAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.quiltsNumAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需食品（吨）" align="center">
                <el-table-column label="修正前" align="center" prop="foodsNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.foodsNumAfter1" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.foodsNumAfter2" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需饮水（吨）" align="center">
                <el-table-column label="修正前" align="center" prop="waterNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.waterNumAfter1" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.waterNumAfter2" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需临时厕所（个）" align="center">
                <el-table-column label="修正前" align="center" prop="bathroomNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.bathroomNumAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.bathroomNumAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需临时浴室（个）" align="center">
                <el-table-column label="修正前" align="center" prop="showersNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.showersNumAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.showersNumAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需医务人员（人）" align="center">
                <el-table-column label="修正前" align="center" prop="medicalMattersBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.medicalMattersAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.medicalMattersAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="其中医生（人）" align="center">
                <el-table-column label="修正前" align="center" prop="medicalNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.medicalNumAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.medicalNumAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="其中护士（人）" align="center">
                <el-table-column label="修正前" align="center" prop="nurseNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.nurseNumAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.nurseNumAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="其中心理医生（人）" align="center">
                <el-table-column label="修正前" align="center" prop="psychologistBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.psychologistAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.psychologistAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需病房（平方米）" align="center">
                <el-table-column label="修正前" align="center" prop="sickroomNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.sickroomNumAfter1" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.sickroomNumAfter2" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需病床（张）" align="center">
                <el-table-column label="修正前" align="center" prop="sickbedNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.sickbedNumAfter1" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.sickbedNumAfter2" :precision="0" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="需血浆（升）" align="center">
                <el-table-column label="修正前" align="center" prop="plasmaNumBefore"></el-table-column>
                <el-table-column label="修正后" align="center" min-width="200">
                    <template #default="{ row }">
                        <el-row>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.plasmaNumAfter1" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                            <el-col :span="2"><span>-</span></el-col>
                            <el-col :span="11">
                                <el-input type="number" v-model="row.plasmaNumAfter2" :min="0"
                                    controls-position="right" :disabled="!isEdit" />
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
            <template #append v-if="isShowAppend">
                <el-link :underline="false" type="primary" class="load-more">
                    <el-icon style="vertical-align: middle;margin-right: 5px;">
                        <Loading />
                    </el-icon>
                    滚动加载更多
                </el-link>
            </template>
            <template #append v-if="isShowEnd">
                <el-link :underline="false" type="primary" class="load-more">
                    已经加载全部数据了!
                </el-link>                
            </template>
        </el-table>
    </div>
</template>

<script setup>
const props = defineProps({
    tableData: Array,
    isEdit: Boolean,
    isShowAppend: Boolean,
    isShowEnd:Boolean,
})
const tableRef = ref()
const emits = defineEmits(['saveAssessmentResults', 'getAssessmentResults','handleExportResults'])
const saveAssessmentResults = () => { emits('saveAssessmentResults', tableRef.value) }
const getAssessmentResults = () => { emits('getAssessmentResults') }
const handleExportResults = () => { emits('handleExportResults') }
</script>
<style scoped lang="scss">
.eva-table {
    margin-bottom: 30px;

    .el-table {
        margin-top: 20px;
    }

    // .el-input --small {
    //     width: 80px;
    // }
}
@keyframes loadingCircle {
  100% {
    transform: rotate(360deg);
  }
}

.load-more {
    padding: 10px;
    .el-icon {
        animation: loadingCircle 1s infinite linear;
    }
}
</style>